<template>
  <footer>
    <!-- router-link的高亮的时通过比对url和to属性进行切换的 -->
    <router-link
      class="item"
      v-for="item in tabbarList"
      :key="item.title"
      :to="'/home' + item.url"
    >
      <!-- @click="tabChange(item)"
      :class="{ active: item.title === activeTitle }" -->
      <span class="iconfont" :class="item.icon"></span>
      {{ item.title }}
    </router-link>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      // activeTitle: sessionStorage.getItem("activeTitle") || "电影/影院",
      // activeTitle: "电影/影院",
      tabbarList: [
        {
          title: "电影/影院",
          icon: "icon-xiaoshipinyingshi48",
          url: "/movies",
        },
        {
          title: "视频",
          icon: "icon-shipin",
          url: "/videos",
        },
        {
          title: "小视频",
          icon: "icon-dianying",
          url: "/mini",
        },
        {
          title: "演出",
          icon: "icon-yanchu-xianxing2-0",
          url: "/show",
        },
        {
          title: "我的",
          icon: "icon-wode",
          url: "/mine",
        },
      ],
    };
  },
  methods: {
    tabChange(item) {
      // 将高亮的变量存到sessionStorage本地存储，刷新的时候不要清除记录
      // sessionStorage.setItem("activeTitle", item.title);
      // 高亮
      // this.activeTitle = item.title;
      // 编程式跳转
      this.$router.push("/home" + item.url);
    },
  },
  // watch: {
  //   // 监听url的改变，让对应的高亮
  //   $route(to, from) {
  //     console.log(to.path);
  //     this.tabbarList.forEach((item) => {
  //       if (to.path.includes(item.url)) {
  //         this.activeTitle = item.title;
  //       }
  //     });
  //   },
  // },
};
</script>

<style lang="less" scoped>
footer {
  position: fixed;
  width: 100%;
  height: 50px;
  border-top: 1px solid @border-color;
  left: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  font-size: @xs-font;

  .item {
    flex: 1;
    .center();
    display: flex;
    flex-direction: column;

    .iconfont {
      font-size: @xl-font;
    }
  }

  .router-link-active {
    color: @theme-color;
  }
}
</style>
